<template>
  <div class="PendingReview">
    <!-- <div class="title">
      <div class="text blue"></div>
      <div class="text"><h1>待审核计划</h1></div>
    </div>-->
    <div class="search">
      <el-input v-model="callSign" clearable class="input-long" size="medium" placeholder="呼号" @keyup.enter.native="searchFun"></el-input>
      <el-input v-model="takeoffAirport" clearable class="input-long" size="medium" placeholder="空域" @keyup.enter.native="searchFun"></el-input>
      <el-select v-model="taskNature" clearable size="medium" placeholder="任务性质" @change="searchFun">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-input v-model="takeoffAirport" clearable class="input-long" size="medium" placeholder="起飞机场" @keyup.enter.native="searchFun"></el-input>
      <el-input v-model="landAirport" clearable class="input-long" size="medium" placeholder="降落机场" @keyup.enter.native="searchFun"></el-input>
      <el-date-picker
        v-model="startTime"
        class="input-long"
        value-format="yyyy-MM-dd HH:mm:ss"
        size="medium"
        type="datetime"
        placeholder="开始时间"
        @change="searchFun"
      ></el-date-picker>
      <el-date-picker
        v-model="endTime"
        class="input-long"
        value-format="yyyy-MM-dd HH:mm:ss"
        size="medium"
        type="datetime"
        placeholder="结束时间"
        @change="searchFun"
      ></el-date-picker>
      <el-button type="primary" size="medium" @click="searchFun">搜索</el-button>
      <el-select v-model="landAirport" class="landingAirport" clearable size="medium" placeholder="降落机场" @change="searchFun">
        <el-option v-for="item in optionsTwo" :key="item.value" :value="item.value"></el-option>
      </el-select>
    </div>
    <div class="table">
      <div class="table-border"></div>
      <el-table
        ref="singleTable"
        :default-sort="{ prop: 'id', order: 'flightUnit' }"
        highlight-current-row
        :data="pendingData"
        :height="tableHeight"
        style="width: 100%"
        @current-change="handleCurrent"
      >
        <el-table-column prop="id" label="计划编号" sortable width="120" align="center" header-align="center"></el-table-column>
        <el-table-column prop="callSign" label="呼号" sortable width="150" align="center" header-align="center"></el-table-column>
        <el-table-column prop="captain" label="机长" sortable width="120" align="center" header-align="center"></el-table-column>
        <el-table-column prop="flightUnit" label="飞行单位" sortable align="center" width="300" header-align="center"></el-table-column>
        <el-table-column prop="aircraftModel" label="航空器型号" sortable width="200" align="center" header-align="center"></el-table-column>
        <el-table-column prop="monitorEquipType" label="监视设备类型" sortable width="150" align="center" header-align="center"></el-table-column>
        <el-table-column prop="taskNature" label="任务性质" sortable width="120" align="center" header-align="center"></el-table-column>
        <el-table-column prop="startTime" label="起始时间" sortable width="190" align="center" header-align="center"></el-table-column>
        <el-table-column prop="takeoffAirport" label="起飞机场" sortable width="150" align="center" header-align="center"></el-table-column>
        <el-table-column prop="endTime" label="结束时间" sortable width="190" align="center" header-align="center"></el-table-column>
        <el-table-column prop="landAirport" label="降落机场" sortable width="150" align="center" header-align="center"></el-table-column>
      </el-table>
    </div>
    <div class="tablePage">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[20, 50, 100, 200]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import { flightPlainPost } from '../../api/planHome'
import { mapState, mapActions, mapGetters } from 'vuex'
export default {
  props: ['reviewMessage'],
  data() {
    return {
      callSign: '',
      taskNature: '',
      startTime: '',
      endTime: '',
      takeoffAirport: '',
      landAirport: '',
      tableHeight: 680,
      currentPage: 1,
      pageSize: 10,
      total: null,
      options: [
        {
          value: '农业作业'
        },
        {
          value: '观光'
        },
        {
          value: '低空测绘'
        },
        {
          value: '跳伞娱乐'
        },
        {
          value: '摄影'
        },
        {
          value: '运输'
        },
        {
          value: '应急'
        }
      ],
      pendingData: [],
      optionsTwo: [
        {
          value: '胶州区机场'
        },
        {
          value: '济南平阴机场'
        },
        {
          value: '平阴孝直通用机场'
        },
        {
          value: '历城区机场'
        },
        {
          value: '崂山区机场'
        },
        {
          value: '钢城区机场'
        },
        {
          value: '德州平原通用机场'
        },
        {
          value: '城阳区机场'
        },
        {
          value: '长清区机场'
        },
        {
          value: '莱芜机场'
        }
      ]
    }
  },
  computed: {
    ...mapState('app', ['flightShow', 'flightMess'])
  },
  watch: {
    flightShow(newValue) {
      if (newValue) {
        this.tableHeight = 230
      } else {
        this.tableHeight = 680
        this.searchFun()
      }
    },
    flightMess(newValue) {
      if (newValue.apprStatus !== '未审批') {
        this.setCurrent(newValue)
      }
    }
  },
  mounted() {
    this.searchFun()
  },
  methods: {
    ...mapActions('app', ['setFlightShowFun', 'setFlightMessFun']),
    setCurrent(newValue) {
      this.$refs.singleTable.setCurrentRow(newValue)
    },
    handleCurrent(val) {
      if (!val) return
      this.tableHeight = 230
      this.setFlightMessFun(val)
      this.setFlightShowFun(true)
      localStorage.setItem('checkedPlan', JSON.stringify(val))
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.searchFun()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.searchFun()
    },
    async searchFun() {
      const param = {
        apprStatus: 0,
        callSign: this.callSign,
        endTime: this.endTime,
        id: '',
        startTime: this.startTime,
        taskNature: this.taskNature,
        takeoffAirport: this.takeoffAirport,
        landAirport: this.landAirport
      }
      const res = await flightPlainPost(this.currentPage, this.pageSize, param)
      this.pendingData = res.data.data
      const resPage = await flightPlainPost(this.currentPage, '', param)
      this.total = resPage.data.data.length
    }
  }
}
</script>
<style lang="scss" scoped>
.PendingReview {
  margin: 20px 14px;
  .title {
    height: 70px;
    .text {
      float: left;
    }
    .blue {
      width: 6px;
      height: 38px;
      border-radius: 20%;
      background: #62adf8;
      margin-right: 4px;
    }
  }
  .search {
    display: flex;
    .landingAirport {
      margin-left: 130px;
    }
    .input-long {
      width: 210px;
      margin-right: 6px;
    }
    /deep/.el-input {
      .el-input__inner {
        color: #fff;
        background: transparent;
      }
    }
    /deep/ .el-date-editor {
      display: block;
      .el-input__inner {
        color: #fff;
      }
    }
    .el-input {
      width: 210px;
    }
    .el-select {
      width: 160px;
      margin-right: 6px;
    }
    .el-date-editor {
      width: 200px;
      margin-right: 6px;
    }
    .el-button {
      width: 60px;
      margin-right: 6px;
      padding: 10px 14px;
    }
  }
  .table {
    margin-top: 20px;
    .table-border {
      width: 100%;
      height: 1px;
      background: #e0e0e0;
    }
    ::v-deep .el-table__row {
      cursor: pointer;
    }
    ::v-deep .cell {
      display: inline-block;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    /deep/ .el-table {
      background-color: transparent;
      color: #fff;
      margin: 5px;
      width: 100%;

      th,
      tr {
        background-color: transparent;
      }
      thead {
        color: #fff;
      }
      .el-table__body-wrapper {
        height: 340px;
        @include scrollbar-custom;
      }
    }
    /deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
      background: rgba(72, 106, 147, 0.8) !important;
    }
    /deep/.el-table__body tr.current-row > td {
      background: rgba(72, 106, 147, 0.8) !important;
    }
  }
  .tablePage {
    margin-top: 20px;
    /deep/.el-pagination {
      .el-pagination__total,
      .el-pagination__jump,
      .el-pagination__sizes,
      .el-input__inner,
      .btn-prev,
      .btn-next,
      .el-pager li {
        color: #fff;
        background: transparent;
      }
    }
  }
}
</style>
